<template>
  <div id="box">
    <table class="tab">
      <tr>
        <td>ID</td>
        <td>名称</td>
        <td>类型</td>
        <td>价格</td>
        <td>
          <select class="sortBox" v-model="sortOption">
            <option value="default">默认排序</option>
            <option value="asc">价格升序</option>
            <option value="desc">价格降序</option>
          </select>
        </td>
      </tr>
      <tr style="display: flex;">
        <input type="text" placeholder="请输入茶叶名称搜索" v-model="searchTea">
      
      </tr>
      <tr v-for="(item, index) in filterTeas" :key="item.id" v-stripe="index">
        <td>{{ item.id }}</td>
        <td>{{ item.t_name }}</td>
        <td>{{ item.t_type }}</td>
        <td>{{ item.t_price }}</td>
        <td><button @click="del(item.id)">删除</button></td>
      </tr>
    </table>
  </div>
</template>
<script>
import { computed, ref } from "vue";

export default {
  setup() {
    let sortOption = ref("default");//排序
    let searchTea = ref();//搜索
    let teasData = [
      {
        id: 0,
        t_name: "六安瓜片",
        t_type: "绿茶",
        t_price: 100,
      },
      {
        id: 1,
        t_name: "信阳毛尖",
        t_type: "绿茶",
        t_price: 110,
      },
      {
        id: 2,
        t_name: "碧螺春",
        t_type: "绿茶",
        t_price: 90,
      },
    ];
    const teas = ref([...teasData])
    //   计算属性更新数组
    let filterTeas = computed(() => {
      let result = [...teas.value];
      // 搜索过滤
      if (searchTea.value) {
        const query = searchTea.value.toLowerCase()
        result = result.filter(tea => 
          tea.t_name.toLowerCase().includes(query)
        )
      }
      //   价格排序
      if (sortOption.value !== "default") {
        result.sort((a, b) =>
          sortOption.value === "asc"
            ? a.t_price - b.t_price
            : b.t_price - a.t_price
        );
      }

      return result;
    });

    //   删除
    function del(tid) {
        teas.value = teas.value.filter(tea => tea.id !== tid)
    }
    return { teasData, sortOption, filterTeas, del,searchTea };
  },
};
</script>
<style >
#box {
  position: absolute;
  top: 20%;
  left: 30%;
}
.tab {
  border: 1px solid;
}
.tab td {
  width: 100px;
  height: 25px;
  text-align: center;
}
</style>